import { useState, useEffect } from 'react';
import { InbizIcon } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';
import './style.less';

const SelectUser = (props: any) => {
  const { data, value, onClick, onDelete } = props;
  const [values, $values] = useState(value ? value.split(',') : []);

  useEffect(() => {
    if (value) {
      $values(value.split(','));
    }
    else {
      $values([])
    }
  }, [value]);

  const handleDelete = (event: any, index: number) => {
    event.stopPropagation();
    onDelete && onDelete(index)
  }

  return (
    <div className='select-user' onClick={onClick} title={value}>
      {values.length ? (
        values.map((val: any, index: number) => (
          <div key={`tag-${index}`} className='tag'>
            <InbizIcon
              type={
                data.Variable?.Key === 'department'
                  ? 'icon-department'
                  : 'icon-user1'
              }
            />&nbsp;
            <span className='name'>{val}</span>
            <InbizIcon onClick={(e: any) => handleDelete(e, index)} className='icon' type="icon-x" />
          </div>
        ))
      ) : (
        <span className='placeholder'><TextWidget>Permission.perm_please_sele</TextWidget></span>
      )}
    </div>
  );
};

export default SelectUser;
